<template>
  <div id="home">
    <!-- 导航栏 -->
    <div class="nav" :class=" navBarFixed == true ? 'navBarWrap' :'' ">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item class="navlogo">课堂管理系统</el-menu-item>
        <el-menu-item index="1">
          <router-link active-class="active" tag="li" to="/home">资源下载</router-link>
        </el-menu-item>
        <el-menu-item index="2">
          <router-link active-class="active" tag="li" to="/hwupload">作业上传</router-link>
        </el-menu-item>
        <el-submenu index="3" right-item>
          <template slot="title">我的</template>
          <el-menu-item index="3-1">个人信息</el-menu-item>
          <el-menu-item index="3-2">
            <router-link active-class="active" tag="li" to="/changepwd">修改密码</router-link>
          </el-menu-item>
          <el-menu-item index="3-3">
            <router-link active-class="active" @click="exitLogin" tag="li" to="/login">退出账户</router-link>
          </el-menu-item>
        </el-submenu>
        <el-menu-item index="4" right-item>
          <el-button type="primary" @click="sign" v-if="storObj == ''" >点击签到</el-button>
          <el-button type="info" @click="sign" v-if="storObj.signFlag == '1'" >已经签到</el-button>
          <!-- <el-button type="info">签到完成</el-button> -->
        </el-menu-item>
        <el-menu-item :bind="storObj" index="5" right-item v-if="storObj == ''">欢迎</el-menu-item>
        <el-menu-item :bind="storObj" index="5" right-item v-else>欢迎,{{storObj.stuData.stuName}}</el-menu-item>
      </el-menu>
      <div class="line"></div>
    </div>
    <!-- 加载页面 -->
    <router-view></router-view>
  </div>
</template>

<script>
import Axios from 'axios';
// import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "app",
  components: {
    // HelloWorld
  },
  data() {
    return {
      navBarFixed: false,
      activeIndex: "1",
      storObj : ''
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    //吸顶效果
    hidemenu() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      //当滚动超过50时，实现吸顶效果（导航高度为50）
      if (scrollTop > 50) {
        this.navBarFixed = true;
      } else {
        this.navBarFixed = false;
      }
    },
    //退出登录
    exitLogin() {
      sessionStorage.clear();
      this.$router.push("/login");
    },
    sign(){
      this.storObj = JSON.parse(JSON.stringify(Base64.decode(localStorage.getItem("storObj"))));
      if (this.storObj.signFlag === '0') {
         Axios.post('/sign')
        .then(function (response) {
          alert(response.msg);
          var btn = document.getElementsByTagName("button");
          btn.setAttribute("type","info");
        })
        .catch(function(err){
          console.log(err);
        })
      } else {
       var btn = document.getElementsByTagName("button");
        btn.setAttribute("type","info");
        alert("已经签到，请勿重复点击！")
      }
    },
    //获取登录状态
    getLoginFlag() {
      var tp = sessionStorage.getItem("loginflag");
      if (tp) {
        var t = JSON.parse(tp);
        var info = t.msg;
        var base64 = new Base64();
        var objInfo = JSON.parse(base64.decode(info));
        return objInfo;
      } else {
        return null;
      }
    },
    //检查登录标记
    checkLoginFlag() {
      storObj = JSON.parse(JSON.stringify(Base64.decode(localStorage.getItem("storObj"))));
      if (storObj.signFlag === '1') {
        
      } else {
        
      }
    },
    noback() {
      history.pushState(null, null, document.URL);
      window.addEventListener("popstate", function() {
        history.pushState(null, null, document.URL);
      });
    },
  },
  mounted() {
    window.addEventListener("scroll", this.hidemenu); //监听滚动事件

    this.noback();
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* margin-top: 60px; */
}

.navBarWrap {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
}

.el-menu-demo li[right-item] {
  float: right;
}

.el-menu-demo .navlogo {
  font-size: 30px;
  float: left;
}
</style>
